<template>
  <div class="homebox">
    <van-nav-bar
      :title="$t('textTrans.绑定银行卡')"
      left-arrow
      @click-left="onClickLeft"
    >
      <!--     <template #right>
 @click-right="goRight"
        <van-icon name="clock-o" color="white" />
      </template> -->
    </van-nav-bar>
    <div class="noticeWrap">
      <!--    <div class="wallet-balance">
        <div>可用余额:{{ userInfo[1].account }}</div>
        <div style="color: #29aae3">USDT</div>
      </div> -->
      <div style="background: #004e49; padding: 20px">
        <div style="background: #bededd; padding: 10px 10px; border-radius: 10px">
          <div>
            <p class="p-type">Account holder</p>
            <van-field
              v-model="data.bank_owner"
              placeholder="please enter Account holder"
            />
          </div>
          <div>
            <p class="p-type">Account Card No</p>
            <van-field
              v-model="data.bank_number"
              placeholder="please enter Account Card No"
            />
          </div>
          <div>
            <p class="p-type">Phone number</p>
            <van-field
              v-model="data.bank_phone"
              placeholder="You reserve a phone number at the bank"
            />
          </div>
          <div>
            <p class="p-type">Account holder IFSC</p>
            <van-field
              v-model="data.bank_ifsc"
              placeholder="please enter Account holder IFSC"
            />
          </div>
          <div>
            <p class="p-type">Email</p>
            <van-field
              v-model="data.bank_email"
              placeholder="please enter Email"
            />
          </div>
          <div>
            <p class="p-type">Deposit bank</p>
            <van-field
              v-model="data.bank_name"
              placeholder="please enter Deposit bank"
            />
          </div>
              <div>
            <p class="p-type">Account address</p>
            <van-field
              v-model="data.bank_address"
              placeholder="please enter Account opening address"
            />
          </div>
        </div>
      </div>
<!--      <div style="background: #f5f5f5; padding: 20px">
        <div style="background: white; padding: 10px 10px; border-radius: 10px">
          <div>
            <p class="p-type">Wallet contact number</p>
            <van-field
              v-model="data.wallet_phone"
              placeholder="please enter Wallet contact number"
            />
          </div>
          <div>
            <p class="p-type">WatsApp member</p>
            <van-field
              v-model="data.whats_app"
              placeholder="please enter WatsApp member"
            />
          </div>
        </div>
      </div> -->
      <div style="padding: 20px;background: #004e49;">
        <van-button
          class="loginBtn"
          @click="submitReg"
          style="margin-top: 0px;"
          >Submit</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { drawCommit, userbankCommit } from "../../api/home";
import { userInfo } from "../../api/personal";
import { sendSms } from "@/api/login";
import { userAccount } from "@/api/home";
export default {
  data() {
    return {
      radio: "1",
      data: {
        bank_owner: "",
        whats_app: "",
        wallet_phone: "",
        bank_number: "",
        bank_phone: "",
        bank_name: "",
        bank_email: "",
        bank_ifsc: "",
        bank_address:""
      },
      noticeList: {},
      code: "",
      userInfo: {},
      number: "",
      disabled: false,
      timer: null,
      timeTips: "发送验证码",
      time: 60,
      draw_id: "",
      money: "",
      address: "",
      cuname: "",
      cardinal_number: "",
      rate: "",
      pay_password: "",
    };
  },
  created() {
    // userAccount().then((res) => {
    // 	this.userInfo = res;
    // 	this.cardinal_number = res[2];
    // });
    userInfo().then((res) => {
    	this.data = res;
    });

  },
  methods: {
    submitReg() {
      userbankCommit(this.data).then((res) => {
        console.log(res);
		   userInfo().then((res) => {
    	this.data = res;
    });
      });
    },
    countDown(time) {
      if (time === 0) {
        this.disabled = true;
        this.codetext = "获取验证码";
        return;
      } else {
        this.disabled = false;
        this.codetext = "重新发送(" + time + ")";
        time--;
      }
      setTimeout(() => {
        this.countDown(time);
      }, 1000);
    },
    getCode() {
      sendSms(this.temp.phone).then((res) => {
        let time = this.time;
        const timer = setInterval(() => {
          if (time <= 1) {
            this.disabled = false;
            this.timeTips = "发送验证码";
            clearInterval(timer);
          } else {
            this.disabled = true;
            time--;
            this.timeTips = time + "s后重新获取";
          }
        }, 1000);
      });
    },
    getnumber() {
      this.rate = (this.number / 100) * this.noticeList.rate;
      console.log(this.rate);
    },
    goRight() {
      this.$router.push({
        path: "withdrawRecord",
      });
    },
    getrate() {
      this.rate = (this.noticeList[0].rate / 100) * this.money;
    },
    getid(item, index) {
      this.draw_id = item.id;
      this.cardinal_number = this.userInfo[index + 1];
      this.cuname = item.name;
    },
    submit() {
      let data = {
        account: this.number,
        address: this.address,
        pay_password: this.pay_password,
      };
      drawCommit(data).then((res) => {
        this.number = "";
        this.address = "";
        this.pay_password = "";
        this.rate = "";
        this.code = "";
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped lang="less">
.van-nav-bar {
  background: linear-gradient(270deg, #326964 0%, #326964 100%);
  /deep/.van-nav-bar__title {
    color: #ffffff;
  }
  /deep/ .van-icon {
    color: #ffffff;
  }
}

/deep/.van-icon-card {
  color: #326964;
}
.p-type {
  color: #333;
  font-size: 15px;
  position: relative;
  margin: 15px;
}

.p-type::before {
  content: "";

  position: absolute;

  left: -9px;

  top: 40%;

  background-color: #326964;

  display: inline-block;
  width: 5px;
  height: 5px;

  border-radius: 50%;

  margin-right: 12px;
}
/deep/.van-cell {
  margin: 10px;
  box-sizing: border-box;
  width: 92%;
  border-radius: 10px;
  background: #f5f5f5;
  color: #333;
}

/deep/.van-field__control {
  background: #f5f5f5;
  color: #333;
}

.homebox {
  width: 100%;
  height: 100%;
  // background: url('../../assets/imgs/home/beijing.png') no-repeat;
  // background-size: 100% 100%;
}

/deep/.van-button--primary {
  color: #fff;
  background: #326964;
  border: none;
}

.van-field__button {
  .van-button {
    color: #fff;
    font-size: 15px;
  }
}
.noticeWrap {
  padding: 0 0px;

  .wallet-balance {
    margin: 20px auto;
    width: 86%;
    padding: 10px 15px;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    background: #eaf9ff;
  }

  // margin-top: 11px;
}
</style>
